<template>
  
  <div class="app-container">
    <el-row class="sysinfo">
      <span class="item">系统版本:</span>
      <span class="item">前端&nbsp;[{{ version.htmlVersion }}]</span>
      <span class="item">后端&nbsp;[{{ version.codeVersion }}]</span>
      <span class="item">数据&nbsp;[{{ version.dbVersion }}]</span>
    </el-row>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <el-row>
      <el-col :span="24" class="card-box">
        <!-- 许可信息 -->
        <license></license>
      </el-col>
      <el-col :span="24" class="card-box">
        <!-- 用户登录信息 -->
        <userList></userList>
      </el-col>
      <el-col :span="24" class="card-box">
        <!-- 用户待审信息 -->
        <approveList></approveList>
      </el-col>
      <el-col :span="12" class="card-box">
        <!-- Redis缓存信息 -->
        <redis></redis>
      </el-col>
      <el-col :span="12" class="card-box">
        <!-- 内存信息 -->
        <memo></memo>
      </el-col>
    </el-row>
  </div>
  
</template>

<script>
import redis from "@/components/AIT/Dashboard/redis";
import memo from "@/components/AIT/Dashboard/memo";
import dbinfo from "@/components/AIT/Dashboard/dbinfo";
import license from "@/components/AIT/Dashboard/appLicense";
import userList from "@/components/AIT/Dashboard/appUserList";
import approveList from "@/components/AIT/Dashboard/appApproveList";

import { getVersionInfo } from "@/api/aitcommon/aitdashboard";

export default {
  name: "aitdashboard",
  components: {redis,memo,dbinfo,license,userList,approveList},
  data() {
    return {
      version: {
        htmlVersion: "20240115",
        codeVersion: "",
        dbVersion: ""
      }
    }
  },
  created() {
    console.info('appDashboard created')
    this.getlist();
  },
  methods: {
    getlist() {
      getVersionInfo().then(res => {
        // console.info('getlist', res)
        this.version.codeVersion = res.data.codeVersion;
        this.version.dbVersion = res.data.dbVersion;

        // console.info('getlist', this.version)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 卡片样式
.sysinfo {
  border: 1px solid lightgray;
  background-color: #e8f4ff;
  border-radius: 5px;
  box-shadow:0 2px 12px 0 rgb(0 0 0 / 10%);
  margin: 0 15px;
  margin-bottom: 10px;
  padding:5px 15px;
  .item {
    margin: 0 5px;
    font-size: 12px;
    color:darkgray;
  }
  &:hover {
    box-shadow: 0 2px 12px 0 brown;
    .item{
      // font-weight: bold;
      color: black;
    }
  }
}
</style>